<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<style lang="scss" scoped>

</style>
	<script src="/js/vue.min.js" th:src="@{/js/vue.min.js}"></script>
<title>模仿抖音弹幕效果</title>
</head>
<body>
	<p th:text="${hello}">hello</p>
	<div id="app" >
		<button @click="scanningStatus=true">scanStart</button><button @click="scanningStatus=false">scanStop</button>

		<div class="bullet">
			<div :class="{'bullet-item': true, 'active': show}" :style="style" ref="bullet">{{ message }}</div>
		</div>

	</div>
<script th:inline="javascript">
/*<![CDATA[*/
const ctx = /*[[@{/}]]*/ '\/lphone\/';
/*]]>*/
</script>
<script type="text/javascript">
 /*<![CDATA[*/
    new Vue({
        el: '#app',
        data() {
            return {
            	scanningStatus: true,
            	imageUrl : ctx+'img/select_mobile_sample.png'
            }
        },
        methods: {
			scanStart: function (e) {
				this.imageUrl = ctx+'img/select_mobile_sample.png';
				this.scanningStatus = true;
				console.log(this.scanningStatus);
			}
        }
    });
  /*]]>*/
</script>
</body>
</html>